<template>
  <div>
    <div class="footer">
      <div class="footer-server">
        <ul>
          <li><a href="#"><i class="iconfont">&#xe647;
              </i>预约维修服务</a></li>
          <li><a href="#"><i class="iconfont">&#xe601;
              </i>7天无理由退货</a></li>
          <li><a href="#"><i class="iconfont">&#xe606;
              </i>15天免费换货</a></li>
          <li><a href="#"><i class="iconfont">&#xe600;</i>&nbsp;满69元包邮</a></li>
          <li><a href="#"><i class="iconfont">&#xe60d;</i>1100余家售后网点</a></li>
        </ul>
      </div>
      <div class="footer-links">
        <dl class="col-links ">
          <dt>选购指南</dt>
          <dd><a href="#">小米手机</a></dd>
          <dd><a href="#">华为手机</a></dd>
          <dd><a href="#">苹果手机</a>
          </dd>
          <dd><a href="#">OPPO手机</a></dd>
          <dd><a href="#">vivo手机</a></dd>
          <dd><a href="#">荣耀手机</a></dd>
          <dd><a href="#">三星手机</a></dd>
          <dd><a href="#">一加手机</a>
          </dd>
          <dd><a href="#">IQOO手机</a></dd>
          <dd><a href="##">真我手机</a></dd>
        </dl>
        <dl class="col-links ">
          <dt>服务中心</dt>
          <dd><a href="#">申请售后</a></dd>
          <dd><a href="#">售后政策</a></dd>
          <dd><a href="#">维修服务价格</a></dd>
          <dd><a href="#">订单查询</a></dd>
          <dd><a href="#">以旧换新</a></dd>
          <dd><a href="#">保障服务</a></dd>
          <dd><a href="#">防伪查询</a></dd>
        </dl>

        <dl class="col-links ">
          <dt>线下门店</dt>
          <dd><a href="#">智慧之家</a></dd>
          <dd><a href="#">服务网点</a></dd>
          <dd><a href="#">授权体验店/专区</a></dd>
        </dl>

        <dl class="col-links ">
          <dt>关于商城</dt>
          <dd><a href="#">了解商城</a></dd>
          <dd><a href="#">加入商城</a></dd>
          <dd><a href="#">投资者关系</a></dd>
          <dd><a href="#">可持续发展</a></dd>
          <dd><a href="#">廉洁举报</a></dd>
        </dl>

        <dl class="col-links ">
          <dt>关注我们</dt>
          <dd><a href="#">新浪微博</a></dd>
          <dd><a href="#">官方微信</a></dd>
          <dd><a href="#">联系我们</a></dd>
          <dd><a href="#">公益基金会</a></dd>
        </dl>
        <div class="col-contact">
          <p class="phone">400-8888-9999</p>
          <p class="address">8:00-18:00（仅收市话费）</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
@import url('../../assets/css/font_4367545_5vuckvup5pp/iconfont.css');

/* 尾部开始 */
.footer {
  margin-top: 130px;
  width: 100%;
  height: 472px;
  background-color: #fff;
  color: #fff;
  font-size: 12px;
}

.footer-server {
  margin: 0 auto;
  width: 1226px;
  height: 25px;
  padding: 27px 0;
  border-bottom: 1px solid #e0e0e0;
}

.footer-server ul {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.footer-server li {
  width: 180px;
  border-right: 1px solid #e0e0e0;
}

.footer-server li:nth-child(5) {
  margin-right: 45px;
}

.footer-server li:last-child {
  border-right: none;
}

.footer-server a {
  color: #616161;
  transition: all .2s;
  font-size: 16px;
  text-align: center;
}

.footer-server i {
  font-size: 24px;
  margin-right: 6px;
  text-align: center;
}

.footer-server a:hover {
  color: #ff6700;
}

.footer-links {
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  width: 1226px;
  height: 400px;
}

.col-links {
  margin-top: 30px;
}

.col-links dt {
  font-size: 16px;
  color: #333;
}

.col-links dd a {
  display: block;
  margin-top: 10px;
  color: #757575;
}

.col-links a:hover {
  color: #ff6700;
}

.col-contact {
  margin-top: 30px;
  width: 251px;
  height: 80px;
  border-left: #b0b0b0 1px solid;
}

.col-contact .phone {
  color: #ff6700;
  font-size: 20px;
  text-align: center;
}

.col-contact .address {
  margin-top: 5px;
  font-size: 12px;
  color: #616161;
  text-align: center;
}

.kf {
  display: block;
  margin: 15px auto;
  width: 118px;
  height: 28px;
  line-height: 28px;
  border: 1px solid #f25807;
  font-size: 12px;
  color: #ff6700;
  transition: all .4s;
  text-align: center;
}

.col-contact .iconfont {
  margin-right: 5px;
  color: #ff6700;

}

.kf:hover {
  background-color: #f25807;
  color: #fff;
}

.col-contact .iconfont:hover {
  /* background-color: #f25807; */
  color: #fff;
}
</style>